<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { gethVehicle, gethVehicleleft } from "@/apis/vehicles";
import VehicleDetailMosaic from "@/pages/vehicles/components/VehicleDetailMosaic.vue";

const route = useRoute();
const model = ref<any>({});
const breadcrumbs = ref<string[]>([]);
const vehicleImages = ref<string[]>([]); // 用于存储所有相关图片 URL 的数组

// 定义车辆图片类型
type VehicleImage = {
  imageUrl: string;
};

watchEffect(async () => {
  const { id, productType, ancestors, type } = route.query;
  breadcrumbs.value = [...(ancestors as string[])].slice(1);

  const vehicleApi = type === "0" ? gethVehicleleft : gethVehicle;
  try {
    const { data } = await vehicleApi({
      data: {
        carId: Number(id),
        productId: productType,
      },
    });
    // console.log('Vehicle data:', data);
    model.value = data;
    // 提取所有图片列表并加入到 vehicleImages 中
    vehicleImages.value = [
      ...data.carShiWuTuList.map((item: VehicleImage) => item.imageUrl),
      ...data.innerPicList.map((item: VehicleImage) => item.imageUrl),
      ...data.carCheXingTuList.map((item: VehicleImage) => item.imageUrl),
      ...data.carEffectPicList.map((item: VehicleImage) => item.imageUrl),
    ];
  } catch (error) {
    console.error("Failed to fetch vehicle data:", error);
  }
});
</script>

<template>
  <div class="parent-element">
    <div class="flex flex-col overflow-auto overscroll-contain">
      <div class="flex items-center py-6 bg-white gap-x-2 pxm">
        当前位置:
        <a-breadcrumb separator="<">
          <template v-for="item in breadcrumbs" :key="item">
            <a-breadcrumb-item class="!text-gray-600">{{ item }}</a-breadcrumb-item>
          </template>
        </a-breadcrumb>
      </div>
    </div>
    <div class="header-text">
      <div class="drawing">
        <div class="drawingtext">领绣脚垫施工图</div>
        <div v-if="true">
          <VehicleDetailMosaic :data="model" />
        </div>
      </div>

      <div class="productdrawing">
        <div class="productdrawingtext">成品图</div>
        <div v-if="vehicleImages.length > 0" class="image-container">
          <div v-for="(image, index) in vehicleImages" :key="index">
            <img class="imgt" :src="image" alt="成品图" />
          </div>
        </div>
        <div v-else style="margin-top: 200px">
          <p class="text-center text-gray-600">暂无数据...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 为新添加的部分添加样式 */
.parent-element {
  height: 100%;
}

.header-text {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 10px;
  font-size: 18px;
  height: auto;
  width: 100%;
}

.drawing {
  width: 80%;
  height: auto;
  border-right: 1px solid #c7c7c7;
  border-top: 1px solid #c7c7c7;
  padding: 10px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  position: relative;
}

.drawing img {
  width: 70%;
  height: 60%;
  object-fit: contain;
}
.drawingtext {
  text-align: center;
}
.productdrawing {
  width: 20%;
  height: 97%;
  padding: 10px;
  border-top: 1px solid #c7c7c7;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-y: auto;
}
.imporent {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 将子元素水平居中 */
  text-align: center; /*如果需要文本内容也水平居中 */
}
.image-container {
  overflow-y: auto;
  width: 70%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.imgts {
  width: 100%;
  // height: 200px;
}
.image-container img {
  width: 300px;
}
.image-text {
  margin-bottom: 5px;
}
.pxm {
  padding-left: 4rem;
  padding-right: 21rem;
}
</style>
